<template>
  <div class="comfirmInfo" ref="comfirmInfo">
    <top-bar>
      <p slot="title">信息确认</p>
      <p slot="right" class="submit" @click="payment">提交</p>
    </top-bar>
    <scroll class="comfirmInfo-scroll">
      <div class="comfirmInfo-content">
        <div class="header">
          <p>{{info.name}}</p>
          <span>金额</span><span class="price">{{info.price | currency('￥')}}</span>
        </div>
        <section class="middle">
          <ul>
            <li><span class="left">体检医院</span><span class="right">{{info.organization}}</span></li>
            <li><span class="left">体检科室</span><span class="right">云之家体检室</span></li>
            <li><span class="left">预约时段</span><span class="right" style="color: #f29e54">{{new Date().getTime() | formatTime('yyyy-MM-dd hh:mm:ss')}}</span></li>
            <li><span class="left">门诊类型</span><span class="right">{{info.type}}</span></li>
            <!--<li><span class="left">诊查费</span><span class="right">免费</span></li>-->
          </ul>
        </section>
        <section class="mainContent">
          <ul>
            <li><span class="left">付费类型</span><span class="right gray essential" @click="openBottomSheet(0)" ref="payway">必填 ></span></li>
            <li><span class="left">就诊人</span><span class="right essential" @click="openBottomSheet(1)">{{selectedMember.name}} ></span></li>
            <li><span class="left">就诊卡号</span><span class="right gray essential" @click="openBottomSheet(2)" ref="cardNum">选填 ></span></li>
            <li><span class="left">证件类型</span><span class="right">{{selectedMember.cardSort}}</span></li>
            <li><span class="left">身份证</span><span class="right">{{selectedMember.cardNum}}</span></li>
            <li><span class="left">性别</span><span class="right">{{selectedMember.sex===1?'男':'女'}}</span></li>
            <li><span class="left">手机</span><span class="right">{{selectedMember.phone}}</span></li>
            <!--<li><span class="left">住院号</span><span class="right gray essential">选填</span></li>-->
            <!--<li><span class="left">体检类型</span><span class="right gray essential">必填 ></span></li>-->
            <li><span class="left">出生日期</span><span class="right">{{selectedMember.birthday}}</span></li>
            <li><span class="left">疾病史</span><span class="right essential" @click="openBottomSheet(2)" ref="diseaseHistory">无 ></span></li>
            <li><span class="left">支付方式</span><span class="right">到院支付</span></li>
          </ul>
        </section>
        <section class="remind">
          <h3>温馨提示：</h3>
          <p>预约后请留意信息提醒</p>
        </section>
      </div>
    </scroll>
    <mu-bottom-sheet :overlay="true" :open="bottomSheet" @close="closeBottomSheet" :sheetClass="'picker-container'">
      <mu-list>
        <picker @openPicker="closeBottomSheet" :type="type" :data="data"></picker>
      </mu-list>
    </mu-bottom-sheet>
    <router-view :data="order"></router-view>
    <error-tip :err-msg="alertText" v-if="dialog"></error-tip>
  </div>
</template>

<script>
    import TopBar from "../../../components/top-bar/top-bar";
    import Scroll from "../../../components/scroll/scroll";
    import Picker from "./picker";
    import {getFamily} from "../../../api/personal";
    import {ERR_OK} from "../../../api/config";
    import ErrorTip from "../../../components/errorTip/errorTip";

    export default {
      components: {
        ErrorTip,
        Picker,
        Scroll,
        TopBar},
      name: "comfirm-info",
      data () {
        return {
          info: {},
          bottomSheet: false,
          type: 0,
          selectedMember: {},
          data: [],
          order: {},
          dialog: false,
          alertText: ''
        }
      },
      mounted () {
        this.essential = document.getElementsByClassName("essential")
        this._getAppointmentInfo()
        this._getFamily()
      },
      methods: {
        _getAppointmentInfo () {
          let project = localStorage.getItem('selectedProj')
          if (!project) {
            return
          }
          this.info = JSON.parse(project)
        },
        _getFamily () {
          getFamily().then((res) => {
            let response = res.data
            if (response.code === ERR_OK) {
              this.data = response.result
              this.data.forEach((item) => {
                if (item.default === 1) {
                  this.selectedMember = item
                }
              })
            }
          }).catch((err) => {
            console.log('获取家庭成员失败')
          })
        },
        closeBottomSheet (item) {
          this.bottomSheet = false
          if (item.id) {
            this.essential[this.type].textContent = item.name
            this.data.forEach((selected) => {
              if (selected.id === item.id) {
                this.selectedMember = selected
              }
            })
          } else if (item === 'overlay') {
            return
          }
          else {
            this.essential[this.type].textContent = item
          }
          this.essential[this.type].style.color = '#3d3d3d'
        },
        openBottomSheet (sign) {
          this.bottomSheet = true
          this.type = sign
        },
        payment () {
          let payway = this.$refs.payway.innerText
          let medicalCard = this.$refs.cardNum.innerText
          let diseaseHistory = this.$refs.diseaseHistory.innerText
          if (payway === '必填 >') {
            this.dialog = true
            this.alertText = '请选择付费类型'
            setTimeout(() => {
              this.dialog = false
            }, 1000)
            return
          }
          this.order = {
            'patient': this.selectedMember.name,
            'patientId': this.selectedMember.id,
            'project': this.info.name,
            'projectId': this.info.detailId,
            'payway': payway,
            'medicalCard': medicalCard,
            'diseaseHistory': diseaseHistory,
            'organization': this.info.organization,
            'price': this.info.price
          }
          // Object.assign(this.order,this.selectedMember,this.info,obj)
          this.$router.push("/comfirmInfoPay")
        }
      },
      watch: {
        '$route': '_getAppointmentInfo'
      }
    }
</script>

<style scoped lang="scss">
  @import "../../../common/sass/mixin";
  .comfirmInfo{
    background-color: $bc;
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    .submit{
      color: #ffffff;
      @include font-dpr(28px);
    }
    .comfirmInfo-scroll{
      position: absolute;
      top: 90px;
      bottom: 0;
      width: 100%;
      overflow: hidden;
      .comfirmInfo-content{
        padding-bottom: 60px;
        .header{
          background-color: #ffffff;
          margin-top: 30px;
          padding: 30px 45px;
          font-size: 0;
          p{
            @include font-dpr(28px);
            color: $fbc;
          }
          .price{
            color: #e46555;
            margin-left: 20px;
          }
          span{
            color: $fgc;
            @include font-dpr(24px);
          }
        }
        .middle{
          margin-top: 30px;
          background-color: #ffffff;
          padding: 0 28px;
          @include font-dpr(24px);
          li{
            line-height: 60px;
            .left{
              display: inline-block;
              color: $fgc;
              min-width: 120px;
            }
            .right{
              margin-left: 45px;
              color: $fbc;
            }
          }
        }
        .mainContent{
          margin-top: 30px;
          background-color: #ffffff;
          color: $fbc;
          ul{
            padding-left: 24px;
            li{
              border-bottom: 1px solid $borderCor;
              display: flex;
              @include font-dpr(28px);
              line-height: 70px;
              padding-right: 20px;
              letter-spacing: 2px;
              .left{

              }
              .right{
                flex: 1;
                text-align: right;
              }
              .gray{
                color: $fgc;
              }
            }
          }
        }
        .remind{
          color: #ef8934;
          @include font-dpr(24px);
          padding: 0 24px;
          margin-top: 30px;
        }
      }
    }
  }
</style>
